// 如果state中的值 是由接口返回来的。那么这个接口一般都封装在actions中
import { loginApi, getProfileApi, getUserInfoApi } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
// import router from '@/router'
const state = {
  token: getToken() || '',
  userInfo: {}
}
const mutations = {
  setToken(state, newToken) {
    state.token = newToken
    setToken(newToken)
  },
  setUserInfo(state, newUserInfo) {
    state.userInfo = newUserInfo
  },
  logOut(state) {
    state.token = ''
    removeToken()
    state.userInfo = {}
  }
}
const actions = {
  // action提交mutation，由mutation去修改state中的值
  // login(store, data) {
  //   // 使用promise的原因 就是利用promise.resolve和reject方法把登录的结果带到login/index.vue组件中
  //   return new Promise((resolve, reject) => {
  //     loginApi(data).then(res => {
  //       const token = res.data.data
  //       // 拿到token后 怎么把token 存到state中？
  //       // commit 第一个参数时mutation的方法名  第二个参数是mutation所需的参数
  //       store.commit('setToken', token)
  //       // 调用登录接口成功后，在这里跳转到首页 从功能层面来说完全没有问题
  //       // 但是 咱们不建议这么做
  //       // 原因：vuex的做 仅仅是用来存取数据，不建议在vuex中做一些业务逻辑的操作
  //       // router.push({ path: '/' })
  //       resolve(res)
  //     }).catch(error => {
  //       reject(error)
  //     })
  //   })
  // }
  async login(store, data) {
    const res = await loginApi(data)
    const token = res.data
    store.commit('setToken', token)
    return res
  },

  async getProfile(store) {
    const res = await getProfileApi()
    const res2 = await getUserInfoApi(res.data.userId)
    // 拦截 一下后端地址。 把后端返回的头像改为一个无效的地址链接
    // res2.data.staffPhoto = 'http://img1.baidu.cxxxx.com'
    const baseUserInfo = {
      ...res.data,
      ...res2.data
    }
    store.commit('setUserInfo', baseUserInfo)
    return baseUserInfo // return 的目的 是为了8天后 做权限的时候使用
  }
}
const getters = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
